<template>
    <div>
        <el-container>
            <el-main>
                <el-row>
                    <el-button @click="showCreateDialog">新增</el-button>
                    <el-button @click="showEditDialog">编辑</el-button>
                    <el-button>删除</el-button>
                </el-row>
                <el-row>
                    <el-table ref="multipleTable" :data="gridData" width="100%" border fit highlight-current-row >
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column prop="code" label="参数代码" width="100" align="center"></el-table-column>
                        <el-table-column prop="content" label="参数内容描述" width="200" align="center"></el-table-column>
                        <el-table-column prop="value" label="参数值" width="100" align="center"></el-table-column>
                        <el-table-column prop="type" label="参数数据类型" width="120" align="center"></el-table-column>
                        <el-table-column prop="reference" label="参数参考值" width="100" align="center"></el-table-column>
                    </el-table>
                </el-row>
            </el-main>
        </el-container>
        <el-dialog title="参数信息" :visible.sync='dialogVisible'>
            <el-form :model="formData">
                <el-row>
                    <el-form-item label-width="100" label="参数编码">
                        <el-input v-model="formData.code" auto-complete="off"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label-width="100" label="参数内容描述">
                        <el-input v-model="formData.content" auto-complete="off"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label-width="100" label="参数值">
                        <el-input v-model="formData.value" auto-complete="off"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label-width="100" label="参数数据类型">
                        <el-input v-model="formData.type" auto-complete="off"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label-width="100" label="参数参考值">
                        <el-input v-model="formData.reference" auto-complete="off"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-button @click="submit">确定</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            gridData:[
                {
                    code:'1080',
                    content: '统计最大值',
                    value: '9',
                    type: 'number',
                    reference: '7'
                }
            ],
            formData:{
                code:'',
                content: '',
                value: '',
                type: '',
                reference: ''
            }
        }
    },
    methods: {
        handlerSelectionChange(){

        },
        submit(){
            var obj = { code:''+this.formData.code,
                    content: ''+this.formData.content,
                    value: ''+this.formData.value,
                    type: ''+this.formData.type,
                    reference: ''+this.formData.reference};
            this.gridData.push(obj);
            this.dialogVisible = false;
            this.formData.clear;
        },
        showCreateDialog(){
            this.dialogVisible = true
        },
        showEditDialog(){
            var selections = this.$refs.multipleTable.selection;
            console.log("selections------"+JSON.stringify(selections))
            var item = selections[0];
            this.formData.clear;
            this.dialogVisible = true
        }
    }
}
</script>